<template>
    <div class="box">
        <div class="box-header"><span class="title">事项风险感知</span></div>
        <div class="box-body scroll">
            <ul class="cube-list">
                <li class="item" :class="{'risky':dtmTimeRisky(pauseDuring)}">
                    <div class="item-header">
                        <div class="cube-pattern"></div>
                    </div>
                    <div class="item-body">
                        <div class="title">事项累计处理<span class="num">{{pauseDuring}}</span>天</div>
                        <div class="subtitle">在事项办结效率上，高于<span class="num">{{pauseDuringRank}}%</span>的流程事项</div>
                    </div>
                </li>
                <li class="item" :class="{'risky':dtmCompletionRisky(completion)}">
                    <div class="item-header">
                        <div class="cube-pattern"></div>
                    </div>
                    <div class="item-body">
                        <div class="title">数据完整度<span class="num">{{completion}}</span>%</div>
                        <div class="subtitle">在流程事项数据的完整度上，高于<span class="num">{{completionRank}}%</span>的流程事项</div>
                    </div>
                </li>
                <li class="item" :class="{'risky':determineBlank(blankCount)}">
                    <div class="item-header">
                        <div class="cube-pattern"></div>
                    </div>
                    <div class="item-body">
                        <div class="title">待补充数据项<span class="num">{{blankCount}}</span>个</div>
                        <div class="subtitle">补充数据工作量高于{{blankRank}}%的流程事项</div>
                    </div>
                </li>
            </ul>
            <x-loading v-if="showLoading"></x-loading>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import Loading from '@/components/Loading'
import bus from '@/utils/bus'

    export default {
        name: '',
        data() {
            return {
                showLoading:false,
                pauseDuring:0,
                pauseDuringRank:0,
                completion:0,
                completionRank:0,
                blankCount:0,
                blankRank:0
            }
        },
        components:{
            'x-loading':Loading
        },
        created() {
            bus.$on('render-flow-analyze',msg=>{
                this.renderView(msg.id)
            })
        },
        methods: {
            renderView(id){
                this.showLoading=true;
                let params = {
                    code:id
                }
                axios.get(this.URLHEAD_TA + 'GetAllProjectRiskSuggestionById',{params:params}).then(res=>{
                    let json = res.data
                    let node = json.Data[0]
                    if(node){
                        this.pauseDuring = node.time.pauseDuring
                        this.pauseDuringRank = node.time.transcend
                        this.completion = parseFloat(node.completion.fileEnrtRate).toFixed(2)
                        this.completionRank = parseFloat(node.completion.transcend).toFixed(2)
                        this.blankCount = node.completion.Unblanked.length
                        this.blankRank = (100 - parseFloat(node.completion.transcend)).toFixed(2)
                        this.showLoading = false
                        if(this.pauseDuring === '0'){
                            this.pauseDuring = '少于1';
                        }
                    }
                })
            },
            determineBlank(val){
                val = parseFloat(val)
                if(val > 0){
                    return true
                }else{
                    return false
                }
            },
            dtmTimeRisky(val){
                if(val === '少于1'){
                    val = 0;
                }
                val = parseFloat(val)
                if(val<=0){
                    return false
                }else{
                    return true
                }
            },
            dtmCompletionRisky(val){
                let n = parseFloat(val)
                if(n<100){
                    return true
                }else{
                    return false
                }
            }
        },
    }
</script>

<style scoped>
.box-body{
    height:233px;
}
.item .cube-pattern{
    width:63px;
    height:89px;
    background: url(../../assets/images/cube-normal.png) center center no-repeat;
}

.item.risky .cube-pattern{
    width:63px;
    height:89px;
    background: url(../../assets/images/cube-risky.png) center center no-repeat;
}
 .cube-list .item {
    display: flex;
    padding: 12px;
    border-bottom: 1px #365ac7 solid;
}
.item.risky .num{
    color:#fa7c00;
}
.item .num{
    color:#365ac7;
}

.cube-list .item-header {
    flex-grow: 0;
}

.cube-list .title {
    font-size: 18px;
    font-weight: bold;
    padding-left: 16px;
    color: #fff;
    margin-bottom: 10px;
}

.cube-list .item-body {
    padding: 16px 0;
}

.cube-list .subtitle {
    padding-left: 16px;
    color: #fff;
}   
</style>